<template>
    <div id="c-notice">
        <p v-if="isShow">
            {{message}}
        </p>
    </div>
</template>

<script>
    export default {
        props: {
            message: {
                type: String,
            },
            autoClose: {
                type: Boolean,
                default: false,
            },
            duration: {
                type: Number,
                default: 3000
            }
        },
        data() {
            return {
                isShow: true
            }
        },
        methods: {
            hide() {
                this.isShow = false;
                this.remove();
            }
        },
        mounted() {
            setTimeout(this.hide, 2000)
        },

    }
</script>

<style scoped lang="scss">
    #c-notice {
        width: 200px;
        height: 100px;
        background-color: rgba(0, 0, 0, 0.71);
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        text-align: center;
        line-height: 100px;
        color: white;
        transform: translateY(-100px);
        transition: all 1s;
    }
    .show {
        transform: translateY(10px);
    }
</style>